<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
		<link rel="stylesheet" href="../../../css/common.css" media="all">
		<style type="text/css">
			.content {
				width: 80%;
				height: 350px;
				overflow-y: scroll;
				padding: 0 10px;
			}

			/*滚动条样式*/
			.content::-webkit-scrollbar {
				width: 4px;
				/*height: 4px;*/
			}

			.content::-webkit-scrollbar-thumb {
				border-radius: 10px;
				-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
				background: rgba(0, 0, 0, 0.2);
			}

			.content::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
				border-radius: 0;
				background: rgba(0, 0, 0, 0.1);

			}

			h3,
			.h3 {
				font-size: 12px;
				margin: 5px 0px;
				font-weight: 400;
			}
			.layui-timeline-item {
			    position: relative;
			    padding-bottom: 10px;
			}
			.layui-timeline-title {
			    position: relative;
			    margin-bottom: 0px;
			}
			.layui-text {
			    line-height: 22px;
			    font-size: 9px;
			    color: #666;
			}
			.layui-text-notes{
				line-height: 22px;
			    font-size: 15px;
			    color: #f00;
			}
		</style>
	</head>
	<body>
		
		<div class="layui-fluid reporting_style">
			<div class="layui-row" id="views"> 
				<!--<button type="button" class="layui-btn layui-btn-normal layui-btn-sm return">
					<i class="layui-icon layui-icon-return"></i>返回列表
				</button>-->
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
					<legend>订单详情</legend>
				</fieldset>
				<div class="layui-card">
					<div class="layui-card-body">
						<ul class="layui-timeline" id="layui-timeline">
						</ul>
						<div class="layui-row layui-col-space15" id="detail_view"></div>
						<div class="layui-row" id="view"></div> 
						<div class="layui-fluid">
							<div class="layui-row" id="view">
								<h3>商品信息</h3>
								<!--<table class="layui-hide" id="test-table-operate" lay-filter="test-table-operate"></table>-->
								
								<table class="layui-table" id="testtable">
								<!--<table class="layui-table" lay-size="sm">-->
								<colgroup>
									<col>
									<col>
									<col>
									<col>
									<col>
								</colgroup>

								<thead>
									<tr>
										<th></th>
										<th >商品编号</th>
										<th>商品名</th>  <!--style="width: 15%;"-->
										<th>规格</th>
										<th>规格参数</th>
										<th>会员价</th>
										<th>购买折扣</th>
										<th>购买价格</th>
										<th>积分使用</th>
										<th>数量</th>
										<th>总价</th>
										<!--<th>排序</th>-->
									</tr>
								</thead>

								<tbody id="temp">
									<tr>
										<td></td>
										<td>
											<!--<div class="flex">
												<input class="layui-input layui-input-choose" onfocus="choosedata()" name="" value="" />
												<button type="button" class="layui-btn layui-btn-sm" onclick="choosedata()"><i class="layui-icon layui-icon-search"></i></button>
											</div>-->
										</td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<!--<td></td>-->
										<td></td> 
									</tr>
								</tbody>
							</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	 
		 <script type="text/html" id="zizeng">
			{{d.LAY_TABLE_INDEX+1}}
		</script> 
		<script type="text/html" id="time_line">
			{{# layui.each(d,function(index,obj){ }}
				<li class="layui-timeline-item">
					<i class="layui-icon layui-timeline-axis"></i>
					<div class="layui-timeline-content layui-text">
						<h3 class="layui-timeline-title">
							{{ obj.addtime ? obj.addtime : '--' }} 
							 <span> {{ String(obj.status) ? '<span class="layui-badge layui-bg-green">' + order_status_show(1,String(obj.status)) + '</span>' : '--' }}<span>
						</h3>
						<p class="layui-text-notes">
							{{  obj.notes ? obj.notes : '' }}
						</p>
					</div>
				</li>
			{{#  }) }}
		</script>
		<script type="text/html" id="demo">
			<div class="layui-card">
				<!--<button type="button" class="layui-btn layui-btn-normal layui-btn-sm return">
					<i class="layui-icon layui-icon-return"></i>返回列表
				</button>-->
				<div class="layui-card-body">
					<div class="layui-row details">
						<div class="layui-col-xs3">
							订单状态：<span> {{ String(d.data.status) ? order_status_show(1,d.data.status) : '' }}<span> 
						</div>
						<div class="layui-col-xs3">
							订单编号：<span> {{ d.data.orderid ? d.data.orderid : '' }}<span> 
						</div>
						<div class="layui-col-xs3">
							会员编号：<span> {{ d.data.memberid ? d.data.memberid : '' }}<span> 
						</div>
						
						<div class="layui-col-xs3">
							购买数量： <span> {{ d.data.quantity ? d.data.quantity : '' }}<span> 
						</div>
						<div class="layui-col-xs3">
							订单金额： <span> {{ d.data.amount ? d.data.amount : '' }}<span> 
							
						</div>
						<div class="layui-col-xs3">
							使用红包： <span> {{ d.data.fee_packet ? d.data.fee_packet : '' }}<span> 
						</div>
						<div class="layui-col-xs3">
							使用积分： <span> {{ d.data.fee_score ? d.data.fee_score : '' }}<span> 
						</div>
						<div class="layui-col-xs3">
							专属折扣： <span> {{ d.data.discount?d.data.discount:'' }}<span>
								
							<!--{{# if(d.data.status == 10){}}
								<button type="button" data-method="discount"  class="layui-btn layui-btn-sm layui-btn-normal audit_btn" id="discount">修改专属折扣</button>
							{{#}}}-->
						</div>
						<div class="layui-col-xs3">
							付款金额： <span> {{d.data.pay_price?d.data.pay_price:''}}<span>
							{{# if(d.data.status == 10){}}
								<button type="button" data-method="pay_price"  class="layui-btn layui-btn-sm layui-btn-normal audit_btn" id="pay_price">修改订单价格</button>
							{{#}}}
						</div>
						<div class="layui-col-xs3">
							付款方式：{{d.data.payment ? '<span class="text_red_color">' + payment_show(1, d.data.payment) + '</span>' : '未付款'}} 
						</div>
						 
						<div class="layui-col-xs3">
							下单时间： <span> {{ d.data.addtime ? d.data.addtime : ''}}<span> 
						</div>
						<div class="layui-col-xs3">
							付款时间： <span> {{ d.data.pay_time ? d.data.pay_time : ''}}<span> 
						</div>
						
					</div>
				</div>
			</div>
			<div class="layui-card">
				<div class="layui-card-body">
					<div class="layui-row details">
						<div class="layui-col-xs12">
							收货人姓名：<span>{{ d.data.consignee ? d.data.consignee : '' }}<span> 
						</div>
						<div class="layui-col-xs12">
							收货人电话：<span>{{ d.data.mobile ? d.data.mobile : '' }}<span> 
						</div>
						<div class="layui-col-xs12">
							收货地址：<span>{{ d.data.areaname ? d.data.areaname : '' }}{{ d.data.address ? d.data.address : '' }}<span> 
						</div>
						
						<button type="button" data-method="address"  class="layui-btn layui-btn-normal audit_btn" id="address">修改收货地址</button>
						
						{{# if(d.data.delivery_name){ }}
						<div class="layui-col-xs12">
							快递公司：<span>{{ d.data.delivery_name ? d.data.delivery_name : '' }}<span> 
						</div>
						{{# }  }}
						{{# if(d.data.delivery_waybill){ }}
						<div class="layui-col-xs12">
							快递单号：<span>{{ d.data.delivery_waybill ? d.data.delivery_waybill : '' }}<span> 
								 <button type="button" class="layui-btn layui-btn-xs"  lay-event="orderdetail" id="ordersdetails">查看物流信息</button>
						</div>
						{{# }  }}
					</div>
				</div>
			</div>
			 
		</script>
		
		<script src="../../../layuiadmin/layui/layui.js"></script>
		<script src="../../../js/jquery.min.js"></script>
		<script src="../../../js/common.js"></script>
		<script>
			var _data = {
				id: getParam('id'),
				orderid: getParam('orderid'),
				no:'',
				com:''
			}
			
			 console.log(_data);

			layui.config({
				base: '../../../layuiadmin/' //静态资源所在路径
			}).extend({
				index: 'lib/index' //主入口模块
			}).use(['index', 'form', 'laytpl','table'], function() {
				var $ = layui.$,
					admin = layui.admin,
					laytpl = layui.laytpl,
					table = layui.table,
					form = layui.form;

				initdata();

				function initdata() {
					var orders_sub = []
							$.get(server.queryordersdetail, _data, function(res, status) {
								if (status == 'success') {
									if (res.code == 0) {
										var data = res.orders_detail							
										_data.com = data.data.delivery_no 
										_data.no = data.data.delivery_waybill 
										_data.pay_price = data.data.pay_price								
										orders_sub = res.orders_sub
										console.log(orders_sub.data)								
										getdata(orders_sub.data)
										var getTpl = demo.innerHTML,
											view = document.getElementById('view');
										laytpl(getTpl).render(data, function(html) {
											view.innerHTML = html;
										});
										var timeline = time_line.innerHTML,
											view = document.getElementById('layui-timeline')
										laytpl(timeline).render(res.orders_oplog.data, function(html) {
											view.innerHTML = html;
										});
									} else {
										layer.msg(res.msg);
									}
								} else {
									layer.msg('服务器连接错误');
								}
							});
						
					
				}  
				
				initdata_list() 
				function initdata_list() {
					table.render({
						elem: '#test-table-operate',
						url: server.queryorders_sub, 
						cols: [
							[{
								width: 50,
								field: 'zizeng',
								title: '#',
								fixed: 'left',
								templet: '#zizeng'
							},{
								field: 'orderid',
								width: 120,
								title: '订单编号'
							},{
								field: 'memberid',
								width: 120,
								title: '会员编号'
							},{
								field: 'userid',
								width: 120,
								title: '用户编号',
								sort: true
							},{
								field: 'skuid',
								width: 120,
								title: '商品编号',
								sort: true
							},{
								field: 'skuname',
								width: 160,
								title: '商品名称'
							},
//							{
//								field: 'spec',
//								width: 160,
//								title: '商品规格',
//								toolbar:"#test-table-operate-goods"
//							}, 
							{
								field: 'specname',
								width: 120,
								title: '规格名称',
								sort: true,
							},{
								field: 'specparam',
								width: 120,
								title: '规格参数',
								sort: true,
							}, {
								field: 'price_member',
								width: 120,
								title: '价格',
							}, {
								field: 'current_price',
								width: 120,
								title: '购买价格',
							},{
								field: 'score_scale',
								width: 120,
								title: '积分可抵扣',
								templet:function(d){
									return d.score_scale?d.score_scale+ '%':''
								}
							},{
								field: 'score',
								width: 120,
								title: '积分可抵扣'
							},{
								field: 'quantity',
								width: 160,
								title: '商品数量'
							},{
								field: 'amount_price',
								width: 160,
								title: '商品总价'
							},{
								field: 'price_waybill',
								width: 120,
								title: '订单运费',
							},{
								field: 'mobile',
								width: 120,
								title: '手机号',
							},{
								field: 'add_by',
								width: 120,
								title: '创建人',
							},{
								field: 'addtime',
								width: 160,
								title: '创建时间',
							},{
								field: 'edit_by',
								width: 120,
								title: '更新人',
							},{
								field: 'edittime',
								width: 160,
								title: '更新时间',
							}]
						], 
						where: _data, 
						request: {
							pageName: 'page',
							limitName: 'size' //每页数据量的参数名，默认：limit
						},
						parseData: function(res) { //将原始数据解析成 table 组件所规定的数据
							return {
								"code": res.code, //解析接口状态
								"msg": res.msg, //解析提示文本
								"count": res.orders_sub.pager.total, //解析数据长度
								"data": res.orders_sub.data //解析数据列表
							};
						}
					});
				}
				
				$(document).on('click','#demo2_back',function(){
					history.go(-1)
				})
				  
			  
			  $(document).on('click','#ordersdetails',function(){
			  	
			  	layer.open({
						type: 2,
						title: '物流信息',
						shadeClose: false,
						shade: 0.5,
						maxmin: true, //开启最大化最小化按钮
						area: ['80%', '70%'],
						content: './order_details_delivery.html?com=' + _data.com + '&no='+_data.no,
						end: function() {
							
						}
					});
			  	
			  })
			  
			  
			  
			  			  
			  
			  //给服务修改按钮添加事件
				var active = {
					notice: function(orderid) { //修改服务状态
						console.log(orderid)
						layer.open({
							type: 2,
							title: '修改订单状态',
							shadeClose: false,
							shade: 0.5,
							area: ['40%', '60%'],
							content: 'order_status_edit.html?orderid=' + orderid,
							end: function() {
								location.reload()
							}
						});
					},
					address:function(){//修改收获地址
						layer.open({
							type: 2,
							title: '修改收货信息',
							shadeClose: false,
							shade: 0.5,
							area: ['50%', '80%'],
							content: 'edit_add_address.html?orderid=' + _data.orderid,
							end: function() {
								location.reload()
							}
						}); 
					},
					discount:function(){//修改收获地址
						layer.open({
							type: 2,
							title: '修改折扣',
							shadeClose: false,
							shade: 0.5,
							area: ['50%', '50%'],
							content: 'profit_set.html?orderid=' + _data.orderid,
							end: function() {
								location.reload()
							}
						}); 
					},
					pay_price:function(){//修改收获地址
						layer.open({
							type: 2,
							title: '修改折扣',
							shadeClose: false,
							shade: 0.5,
							area: ['50%', '50%'],
							content: 'profit_set_pay.html?orderid=' + _data.orderid+'&price='+ _data.pay_price,
							end: function() {
								location.reload()
							}
						}); 
					},
					
					
				};
				
				 $(document).on('click', '.audit_btn', function() {
					var othis = $(this),
					method = othis.data('method');
					active[method] ? active[method].call(this, othis.attr("value")) : '';
					
				});
				 

				window.getdata = function(data, name, id) {
					var html;
					var a = 1;
					for(var i = 0; i < data.length; i++) {
						html += '<tr>' +
							'<td>' + (a + i) + '</td>' +
							'<td><div class="flex"> '+ data[i].skuid + '</div></td>' +
							'<td><div class="flex">' + (data[i].skuname ? data[i].skuname : "") + '</div></td>' +
								
							'<td><div class="flex">' + (data[i].specname?data[i].specname:'')+ '</div></td>' +
							'<td><div class="flex">' + (data[i].specparam?data[i].specparam:'')+ '</div></td>' +
							
							'<td><div class="flex">' + (data[i].price_member?data[i].price_member:'')+ '</div></td>' +
							'<td><div class="flex">' + (data[i].discount?data[i].discount:'')+ '</div></td>' +
							'<td><div class="flex">' + data[i].current_price + '</div></td>' +
						
							'<td><div class="flex">' + (data[i].score  ? data[i].score  : 0)+ '</div></td>' +
							'<td><div class="flex"><input  class="layui-input" type="number" min="1" oninput="if(value < 1){alert('+"非法输入！"+');value = '+1+'}"  name="quantity" value=' + data[i].quantity + ' /></div></td>' +
							
							'<td><div class="flex"><input  class="layui-input" readonly  name="amount_price" value=' + data[i].amount_price + ' /></div></td>' +
							
//							'<td><div class="flex">' +(i+1)+ '</div></td>' +
							
							'</tr>';
					}
					console.log(html)

					$('#temp').before(html)
				}
				
			});
			
			//给类样式 .return 添加的回退功能
			$('.return').on('click', function() {
				window.history.back();
			})
			
			$(document).on("blur","input[name=price_member]",function(e){
				var tr = e.currentTarget.parentElement.parentElement.parentElement
				console.log(tr)				
				var market_price = $(tr).find("input[name=price]").val()
				var score = $(tr).find("input[name=score]").val()
				if (score> 0 && market_price>0) {
					var sumprice_member = Math.round(parseFloat(market_price) * 100) / 100
					var sumScore = Math.round(parseFloat(score) * 100) / 100 
					var sumScale = Math.round(parseFloat((sumScore/market_price).toFixed(2)) * 100)  
					$(tr).find("input[name=score_scale]").val(sumScale)
				}
			})
			
			$(document).on("blur","input[name=score_scale]",function(e){
				
				var tr = e.currentTarget.parentElement.parentElement.parentElement
				console.log(tr)				
				var market_price = $(tr).find("input[name=price]").val()
				var score_scale = $(tr).find("input[name=score_scale]").val()
				if (score_scale >0 &&  score_scale <=100 && market_price>0 ) {
					var sumScore = Math.round(parseFloat((market_price*score_scale).toFixed(2)) * 100) /10000
					$(tr).find("input[name=score]").val(sumScore)
				}
			})
		</script>
	</body>
</html>
